<template>
    <div class="header" style="display: flex; justify-content: flex-end; padding: 10px 0;">
      <el-button type="info" @click="clearLog" :disabled="!configStore.runningFlag">清空日志</el-button>
      <el-button type="danger" @click="stopService" :disabled="!configStore.runningFlag">关闭web</el-button>
      <el-button type="success" @click="startService"  :disabled="configStore.runningFlag">运行web</el-button>
    </div>
    <div class="container">
      <div class="msg-text" v-html="configStore.stdout"></div>
    </div>
</template>

<script setup >
import {useConfigStore} from "../stores/config";
import {nextTick, watch, ref} from "vue";

const configStore = useConfigStore();

const scroll2end = () => {
  nextTick(() => {
    const container = document.querySelector('.msg-text');
    container.scrollTop = container.scrollHeight;
  })
}
scroll2end()


watch(() => configStore.stdout, (newVal) => {
  scroll2end()
})



const stopService = async () => {
  const res = await window.api.stopService();
  // 成功部分的代码在main.js里onclose的回调中
  if (!res.success) {
    configStore.setStdoutLog("vitepress", "#e24050",`关闭失败：${res.message}`);
  }

  
}

const startService = async () => {
  configStore.setRunningFlag(true)
  const port = await window.api.getVitepressPort()
  window.api.startService(port)
  configStore.setStdoutLog("user", "#3de446",`正在启动vitepress服务, 端口：${port}, 请稍等...`)
}

const clearLog = () => {
  configStore.clearStdoutLog()

}





</script>

<style lang="scss" scoped>

.container{
  background-color: #000;
  height: calc(100vh - 120px);
  border-radius: 9px;
  padding: 0 10px 30px 10px;


  .msg-text{
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    display: block;
    height: 100%;
    white-space: pre-wrap;  /* 处理文本换行 */
    overflow-y: auto; 
  }
}
</style>